<template>
  <!-- 创建商户、修改商户 -->
  <view class="edit-wrapper">
    <!-- 步骤条 -->
    <view class="steps-wrapper">
      <view class="steps-content">
        <view class="steps-item active">
          <view class="num">1</view>
          <view class="txt">商户类型</view>
        </view>
        <view class="steps-item" :class="{ active: [2, 3, 4, 5].includes(stepIndex) }">
          <view class="num">2</view>
          <view class="txt">基础资料</view>
          <view class="link" />
        </view>
        <view class="steps-item" :class="{ active: [2, 3, 4, 5].includes(stepIndex) }">
          <view class="num">2</view>
          <view class="txt">基础资料</view>
          <view class="link" />
        </view>
        <view class="steps-item" :class="{ active: [3, 4, 5].includes(stepIndex) }">
          <view class="num">3</view>
          <view class="txt">结算信息</view>
          <view class="link" />
        </view>
        <view class="steps-item" :class="{ active: [4, 5].includes(stepIndex) }">
          <view class="num">4</view>
          <view class="txt">结算费率</view>
          <view class="link" />
        </view>
      </view>
    </view>
    <!-- 表单区域 -->
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, computed } from "vue";
import { useStore } from "@/store/index";
import check from "@/utils/check";
import {
  numAndLetterReg,
  onlyNumberReg,
  onlyCnReg,
  limitCardNoReg,
} from "@/utils/regExp";
import { showToast, showModal } from "@/utils/toast";
import { openDocument, saveImageToAlbum } from "@/utils/methods";
import { navigate } from "@/utils/router";
import { map } from "lodash";
import { exampleImage } from '@/utils/exampleImage';
import moment from "moment";
/** store实例 */
const store = useStore();

// 禁用表单、禁止修改
const isDisable = computed(() => {
  return (
    pageType.value === 'modify' &&
    formData.value.approvePass == 1 &&
    !licenseNameRules.editSwitch
  )
});

/** 商户进件规则 E */

// 步骤索引
let stepIndex = ref(1);
// 页面类型
let pageType = ref("create");
let formData = ref({
  businessType: 4, // 商户类型 0: 企业, 1: 个体工商户, 2: 政府组织机及事业单位, 3: 其他机构组织, 4: 小微商户
  // oss签名配置
  // let ossConfig = {};
});
// 商户主体类型
let businessTypeOpts = reactive([
  {
    name: "小微商户",
    desc: "无营业执照经营的商户，包括流动摊点",
    icon: "https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/business-type-xiaowei.png",
    value: 4,
    show: true,
  },
  {
    name: "个体工商户",
    desc: "有营业执照的个体经营商户",
    icon: "https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/business-type-geti.png",
    value: 1,
    show: true,
  },
  {
    name: "企业",
    desc: "营业执照带有公司字样的均为企业",
    icon: "https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/business-type-qiye.png",
    value: 0,
    show: true,
  }
]);
// 输入框提示语样式
const placeholderStyle = "color: #999999";
</script>
<style lang="scss" scoped>
@import "./index.scss";

// vant组件样式
:deep(.van-stepper__input) {
  width: 120rpx !important;
  height: 64rpx !important;
  background: #ffffff !important;
  font-size: 30rpx !important;
  font-weight: bold !important;
  color: #333333 !important;
  line-height: 64rpx !important;
  border-top: 2rpx solid #5769af !important;
  border-bottom: 2rpx solid #5769af !important;
  padding: 0 !important;
  margin: 0 !important;
}

:deep(.van-stepper__minus) {
  width: 60rpx !important;
  height: 64rpx !important;
  color: #5769af !important;
  background: #ffffff !important;
  border: 2rpx solid #5769af !important;
  border-radius: 32rpx 0rpx 0rpx 32rpx !important;
  margin: 0 !important;
}

:deep(.van-stepper__plus) {
  width: 60rpx !important;
  height: 64rpx !important;
  color: #5769af !important;
  background: #ffffff !important;
  border: 2rpx solid #5769af !important;
  border-radius: 0rpx 32rpx 32rpx 0rpx !important;
  margin: 0 !important;
}

:deep(.van-stepper__minus--disabled),
:deep(.van-stepper__plus--disabled) {
  color: #999999 !important;
  border: 2rpx solid #999999 !important;
}

:deep(.van-stepper__input--disabled) {
  border-top: 2rpx solid #999999 !important;
  border-bottom: 2rpx solid #999999 !important;
}
</style>
